{{extend './_layouts/home.html'}} 
{{block 'head'}}
<style>
    .comment{
        display: flex;
        flex-direction: column;
    }
    .comment .end{
        align-self:flex-end;
    }
    .reply{
        text-align: right;
    }
    .reply textarea{
        width: 100%;
        height: 80px;
    }
    .comment a{
        width: 40px;
    }
    #avatar{
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .replys{
        display: flex;
        flex-direction: column;
    }
    .replyUsers{
        display: flex;
        flex-direction: column;
        border-bottom: 1px black solid;
        margin-bottom: 10px;
    }
    .replyUsers .replyUserName{
        display: flex;
        flex-direction: row;
        
    }
    .replyUserName p{
        line-height: 27px;
    }
    .replyUsers .replyMessage{
        color: rgb(44, 0, 240);
    }
    .replyUsers .replyTime{
        align-self: flex-end;
    }
</style>
{{/block}} 
{{block 'body'}}
<main>
    <div class="container comment">
        <h1>{{comment.title}}
            <h6>
                <a href="/ViewUser?user_id={{ comment.author.authorId }}">
                    {{comment.author.authorName}}
                </a>
                
            </h6>
        </h1>
        <h5>{{comment.message}}</h5>
        <div class="end">
            <h6>{{comment.createTime}}</h6>
        </div>
        
            <input id='commentUserId' type="hidden" value="{{ comment.author.authorId }}">
            <input type="hidden" value="{{ comment._id}}" id="commentId">
            {{ if !userSession}}
            {{ else }}
            <div class="end">
                <a href="" id="focusOn">关注</a>
                <a href="" id="doNice">点赞</a>
            </div>
            {{ /if }}
    </div>
    <div class="container">
    {{ if !userSession}}
        <div class="reply">
            <textarea disabled name="replyMsg" id="" cols="40" rows="10">
            </textarea>
            <h6>
                <button id="" type="button" disabled>回复</button>
            </h6>
            <h6>需要先<a target="_blank" href="/login">登录</a>才能进行回复和关注哦</h6>
            <h6>没有帐号？先<a target="_blank" href='/register'>注册</a>一个吧</h6>
        </div>
        <div class="replys">
            {{ each replys }}
            <div class="replyUsers">
                <h6 class="replyUserName">
                    <img id="avatar" src="/public/img/avatar-default.png" alt="">
                    <p>{{ $value.userName }}</p>
                </h6>
                <p class="replyMessage">{{ $value.message }}</p>
                <h6 class="replyTime">{{ $value.replyTime }}</h6>
            </div>
            {{ /each }}
        </div>
    </div>
    {{ else }}
    <div class="interaction">
        <div class="reply">
            <textarea name="replyMsg" id="replyMsg" cols="30" rows="10"></textarea>
            <h6>
                <button id="replyBtn" type="button">回复</button>
            </h6>
        </div>
        <div class="replys">
            {{ each comment.replys }}
            <div class="replyUsers">
                <h6 class="replyUserName"><img id="avatar" src="/public/img/avatar-default.png" alt=""><p>{{ $value.userName }}</p></h6>
                <h5 class="replyMessage">{{ $value.message }}</h5>
                <h6 class="replyTime">{{ $value.replyTime }}</h6>
                {{ if userSession._id === comment.author.authorId}}
                <h6 class="replyTime">
                    <a href="/deleteReplyed?commentId={{comment.id}}&replyId={{$value.id}}&replyUserId={{$value.userId}}">删除这条回复</a></h6>
                {{ else if userSession._id === $value.userId}}
                <h6 class="replyTime">
                    <a href="/deleteReplyed?commentId={{comment.id}}&replyId={{$value.id}}&replyUserId={{$value.userId}}">删除这条回复</a></h6>
                {{ /if }}   

            </div>
            {{ /each }}
        </div>
       
    </div>
    </div>
    {{ /if }}
</main>
{{/block}} 

{{block 'script'}}
<script>
    var commentUserId = $('#commentUserId').val()
    var commentId = $('#commentId').val().replace(/"/g,'')
    $('#focusOn').click(function(e){
        var data = {
            commentUserId :commentUserId
        }
        e.preventDefault()
        $.ajax({
            url:'/focusOn',
            type:'post',
            data:data,
            dataType:'json',
            success(data){
                var err_code = data.err_code
                if(err_code === 0){
                    window.alert('关注成功')
                    window.location.href='/viewComment?comment_id='+commentId
                }else if(err_code === 1){
                    window.alert('不可以关注自己')
                }
            }
        })
    })
    $('#focusOff').click(function(){

    })
    $('#doNice').click(function(e){
        var data = {
            commentId : commentId,
            commentUserId : commentUserId
        }
        e.preventDefault()
        $.ajax({
            url:'/doNice',
            type:'post',
            data:data,
            dataType:'json',
            success(data){
                var err_code = data.err_code
                if(err_code === 0){
                    window.alert('点赞成功')
                    window.location.href='/viewComment?comment_id='+commentId
                }else{
                    window.alert('点赞失败')
                }
            }
        })
        
    })
    $('#replyBtn').click(function(e){
        e.preventDefault()
        var replyMsg = $('#replyMsg').val()
        var replyContent = {
            replyCommentId:commentId,
            commentId:commentId,
            replyMsg : replyMsg
        }
        if(!replyMsg){
            return window.alert('请先输入需要回复的内容')
        }
        $.ajax({
            url:'/doReply',
            data:replyContent,
            dataType:'json',
            type:'post',
            success(data){
                err_code = data.err_code
                if(err_code === 0){
                    $('#replyMsg').val('')
                    window.location.href='/viewComment?comment_id='+commentId
                }
            }
        })
    })

</script>

{{/block}}